import React from 'react';
import { AppstoreOutlined, SettingOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Menu } from 'antd';
import { useNavigate } from 'react-router-dom'


type MenuItem = Required<MenuProps>['items'][number];

function getItem(
    label: React.ReactNode,
    key: React.Key,
    icon?: React.ReactNode,
    children?: MenuItem[],
    type?: 'group',
): MenuItem {
    return {
        key,
        icon,
        children,
        label,
        type,
    } as MenuItem;
}

const items: MenuProps['items'] = [

    getItem('工作台', 'sub1', <AppstoreOutlined />, [
        getItem('数据分析', '5'),
        getItem('报表', '6'),
        getItem('Submenu', 'sub2', null, [getItem('意见中心', '/advice'), getItem('Option 8', '8')]),
    ]),
    getItem('人员管理', 'sub3', <SettingOutlined />, [
        getItem('用户管理', '/user'),
        getItem('管理员管理', '/admin'),
        getItem('员工管理', '/serve'),


    ]),
    getItem('订单管理', 'sub4', <AppstoreOutlined />, [
        getItem('商品订单', '/goodOrder'),
        getItem('服务订单', '/serveOrder'),
    ]),
    getItem('广告管理', 'sub5', <AppstoreOutlined />, [
        getItem('轮播图', '/swiper'),
        getItem('广告商', '/advertisers'),
    ]),
    getItem('事务处理', 'sub6', <AppstoreOutlined />, [
        getItem('请假管理', '/onvacation'),
        getItem('意见中心', '/advice'),
        getItem('客服管理', '/kefu'),
    ]),
    getItem('商品管理', 'sub7', <AppstoreOutlined />, [
        getItem('服务商品', '/servergoods'),
        getItem('商品', '/normalgoods'),
    ]),
    getItem('评论管理', 'sub8', <AppstoreOutlined />, [
        getItem('商品评论', '/goodcomment'),
        getItem('服务评论', '/comment'),
    ]),
    getItem('贴子管理', 'sub9', <AppstoreOutlined />, [
        getItem('论坛帖子', '/share'),
    ]),
    getItem('分类管理', 'sub10', <AppstoreOutlined />, [
        getItem('服务分类', '/serveclass'),
        getItem('商品分类', '/goodclass'),
    ]),
    getItem('地址管理', 'sub11', <AppstoreOutlined />, [
        getItem('商品评论', '/goodcomment'),
        getItem('服务评论', '/comment'),
    ]),
    getItem('服务人员', 'sub12', <AppstoreOutlined />, [
        getItem('订单列表', '/orderhandle'),
        getItem('订单处理', '/orderprocess'),
        getItem('历史订单', '/orderhistory'),
        getItem('服务人员请假', '/workleave'),
        getItem('员工发帖', '/workpost'),
        getItem('修改信息', '/changeworkermsg')
    ]),

];

const App: React.FC = () => {
    const nav = useNavigate()
    const onClick: MenuProps['onClick'] = (e) => {
        console.log('click ', e);
        nav(`${e.key}`)
    };

    return (
        <Menu
            onClick={onClick}
            style={{ width: 256 }}
            defaultSelectedKeys={['1']}
            defaultOpenKeys={['sub1']}
            mode="inline"
            items={items}
        />
    );
};

export default App;